<template>
	<view class="merchandisecontainer">
		<h1>部分品类专属,先到先得</h1>
		<view class="item" v-for="(item,index) in merchandiseList" :key="index">
			<view class="itemLeft">
				<text class="price">{{item.drewQuantity}}</text>
				<p class="desc">满{{item.minConsume/10}}元可用</p>
			</view>
			<view class="itemRight">
				<p class="name">{{item.couponName}}</p>
				<p class="desc">使用范围:{{item.usingRange}}</p>
				<p class="time">2022.2.1~2022.2.28</p>
			</view>	
			<view class="button">立即领取</view>
		</view>
		
	</view>
	
</template>

<script>
import request from '../../utils/request.js' 
	export default{
		data(){
			return {
				merchandiseList:[]
			}
		},
		mounted(){
			this.getmerchandiseList()
		},
		methods:{
			async getmerchandiseList(){
				const  result =await request('/securities')
				this.merchandiseList=result.securities.content
			}
		}
	}

</script>


<style lang="stylus">
.merchandisecontainer
	
	
	h1
		width 100%
		height 60upx
		font-size 30upx
		margin 40upx 10upx
		color #999999
		line-height 60upx
		background-color #F5F5F5
		position relative
		margin 0
		padding 0
		
	.item
		position relative
		background-color #F5F5F5
		height 300upx
		.itemLeft
			box-sizing border-box
			padding 50upx 10upx
			width 30%
			height 250upx
			background-color #007AFF
			float left
			.info
				font-size 30upx
				color #FFFFFF
				
			.price
				color #FFFFFF
				font-size 80upx
				margin 5upx
			.desc
				color #FFFFFF
				font-size 25upx	
		.itemRight 
			width 60%
			height 250upx
			background-color #FFFFFF
			float left
			
			.name
				font-size 40upx
				margin 20upx 
			.desc
				font-size 30upx
				margin 10upx
				color #AFAFAF
				overflow hidden
				text-overflow ellipsis
				white-space nowrap
			.time
				font-size 30upx
				color #AFAFAF
				margin 10upx
	.button
		text-align center
		line-height 50upx
		width 200upx
		height 50upx
		background-color #1298FA
		border-radius 30upx
		position absolute
		right 2%
		top 175upx
		color #FFFFFF
		opacity 0.8
</style>
